<template>
  <div class="App">
    <h3 class="content">我是app</h3>
    <input type="text" ref="iptEle" v-model="value" />
    <button @click="getMsg">获取输入框的值</button>
    <my-count />
  </div>
</template>

<script>
import MyCount from './components/MyCount.vue'
export default {
  data() {
    return {
      value: ''
    }
  },
  components: {
    MyCount
  },
  methods: {
    getMsg() {
      /* 
      点击按钮收集表单的值:
        - 推荐方法,把表单和数据进行数据双向绑定,直接获取数据的值即可
        - ref方法,获取到表单的元素,进行DOM操作

      ref的使用:
        - 如果想要获取某个真实DOM,则在当前模板元素上添加一个ref属性,值为一个字符串名称
        - 当模板渲染后,在当前的组件实例上的$refs对象中,就会有一个当前字符串名称的属性,值为被设置ref的真实DOM
    */
      console.log(this)
      console.log(this.$refs.iptEle.value) // 获取输入框的值
      this.value = this.$refs.iptEle.value
    }
  }
}
</script>

/* 
问题?  1.style标签的scoped属性 和原理

scoped属性：一旦添加，当前style中样式只对当前组件的模板生效
scoped原理：
在当前组件的style标签中添加了scoped属性，则代表当前的样式拥有作用域,只在当前组件的元素内生效

实际上是给当前组件的所有元素(还有子组件的最外层容器元素)全部添加一个统一的自定义属性(data-v-xxxxxx)(每个组件的自定义属性是不一样的)
然后给所有的scoped中的选择器添加一个属性选择器 XXX[data-v-xxxx],那么就只能选择当前组件的元素了

2.如果我们在父组件中想要控制后代组件的某个元素样式,我们有两种做法
把父组件中书写样式style不要添加scoped(但是这样可能会出现其他问题)
使用深度选择器: 父组件的选择器 >>> 后代组件内元素的选择器
 */


<style scoped>
.App {
  border: 1px solid #000;
}
.content {
  background: pink;
}
/* 样式穿透 */
.App >>> .count {
  background: rgb(205, 205, 186);
}
</style>
